<script setup>
import { onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { useToolsStore } from '@/store/tools'
import { ltrim } from '@/utils/string'

const props = defineProps({
  title: String,
  id: Number
})
const route = useRoute()
const router = useRouter()
//查询参数
const searchParam = reactive({
  cateId: 0,
  title: '',
  route: ''
})
//store
const toolsStore = useToolsStore()

//根据路由查询tool id
const getToolInfos = async () => {
  let routeStr = route.path
  searchParam.route = ltrim(routeStr, '/tools')
  const toolInfos = await toolsStore.getToolInfos(searchParam)
  return toolInfos
}
//收藏
// const collect = () => {
//   ElMessageBox({
//     title: '提示',
//     message: '请使用快捷键`Ctrl+D`进行收藏'
//   })
// }

onMounted(() => {
	document?.getElementById('tools-header')?.scrollIntoView({
	  behavior: "auto", //smooth:平滑，auto：直接定位
	  block: "start",
	  inline: "start",
	});
})

// 返回到工具的上级分类下
const onBack = async ()=>{
	let toolInfos = await getToolInfos();
	const query = { value : '' }
	if (toolInfos != null && toolInfos.length > 0) {
		//跳转锚点
		query.value = 'cate_' + toolInfos[0].cateId
	}
	router.push({
	  path: '/tools',
	  query: query
	})
}

</script>

<template>
  <div id="tools-header" class="pt-3"></div>
  <div class="px-4">
      <div>
        <div style="display: flex; align-items: center;" @click="onBack()">
          <el-icon><Back /></el-icon>
          <div class="ml-0.5 hover-primary select-none">返回</div>
        </div>
    </div>
	<div class="mt-3">
		<el-text tag="b" size="large">{{ props.title }}</el-text>
	</div>
	<el-divider></el-divider>
  </div>
</template>

<style scoped>
	
</style>